<template>
	<div>
		<el-form :inline="true" size="mini">
			
			<el-form-item>
				<el-button type="primary" @click="search">查询岗位下员工</el-button>
				<el-button type="primary" @click="disableAddTypeDialog=true">新增岗位</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageInfo.list" style="100%">
			<el-table-column
				label="编号"
				prop="id"
				width="80"
			></el-table-column>
			<el-table-column label="名称" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.pname" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.pname}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="岗位类型" width="100">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.ptype" size="mini"></el-input>
					</template>
					<template v-else>
						<span v-if="scope.row.ptype == 1">管理</span>
						<span v-if="scope.row.ptype == 2">技术</span>
						<span v-if="scope.row.ptype == 3">营销</span>
						<span v-if="scope.row.ptype == 4">市场</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="岗位编制" width="200" >
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-input v-model="type.plait" size="mini"></el-input>
					</template>
					<template v-else>
						<span>{{scope.row.plait}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template v-if="scope.row.edit">
						<el-button @click="handleTypeSave(scope)" size="mini" type="primary">保存</el-button>
						<el-button size="mini" @click="scope.row.edit=false" type="danger">取消</el-button>
					</template>
					<template v-else>
						<el-button @click="handleTypeEdit(scope)" size="mini" type="primary">编辑</el-button>
						<el-button size="mini" @click="handleTypeDel(scope)" type="danger">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next,total,jumper,sizes"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:page-sizes="[5,10,15,20]"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<el-dialog :visible.sync="disableSelectDialog" title="查询岗位下员工" center>
			<div align="center">
				<el-form :inline="true" align="center" size="mini">
					<el-form-item label="岗位名称">
						<el-select v-model="postName">
							<el-option v-for="(item,index) in typeList" :key="index" :value="item.pname" placeholder="请选择岗位名称"></el-option>
						</el-select>
						<el-button type="primary" @click="getEmp">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="searchEmp">
					<el-table-column label="编号" prop="id"></el-table-column>
					<el-table-column label="名字" ></el-table-column>
				</el-table>
			</div>
			
		</el-dialog>
		
		<el-dialog :visible.sync="disableAddTypeDialog" title="新增岗位" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="岗位编号:">
					<el-input v-model="type.id" placeholder="请输入岗位编号" ></el-input>
				</el-form-item>
				<el-form-item label="岗位名称:">
					<el-input v-model="type.pname" placeholder="岗位名称" ></el-input>
				</el-form-item>
				<el-form-item label="岗位类型" >
					<el-select v-model="type.ptype">
						<el-option :key="1" label="管理" :value="1"></el-option>
						<el-option :key="2" label="技术" :value="2"></el-option>
						<el-option :key="3" label="营销" :value="3"></el-option>
						<el-option :key="4" label="市场" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="岗位编制">
					<el-input v-model="type.plait" placeholder="请输入岗位编制"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="disableAddTypeDialog=false">取消</el-button>
					<el-button type="primary" @click="insertType()">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{				
				pageInfo:{
					pageNum:1,
					pageSize:5
				},
				postName:"",
				disableSelectDialog:false,
				keyword:"",
				type:{},
				disableAddTypeDialog:false,
				typeList:[],
				params:{},
				itemPageInfo:{},
				ids:[],
				post:{},
				searchEmp:{}
			}
		},
		created(){
			this.showData(1,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "post/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize = pageSize;
			},
			search(){
				this.disableSelectDialog = true;
				let url = "post/getAll";
				
				axios.post(url).then(resp=>{
					this.typeList = resp.data.data;
				})
			},
			getEmp(){
				let url1 = "post/getByName";
				let pname = this.postName
				axios.post(url1,`pname=${pname}`).then(resp=>{
					let post = resp.data.data;
					
					let url2 = "emp/getByPost";
					axios.post(url2,post).then(resp=>{
						this.searchEmp = resp.data.data
					})
				})
			},
			handleTypeEdit(scope){
				//console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			handleTypeSave(scope){
				let url = "post/update";
				let type = this.type;
				
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						scope.row.edit = false;
						scope.row.id = this.type.id;
						scope.row.pname = this.type.pname;
						scope.row.ptype = this.type.ptype;
						scope.row.plait = this.type.plait;
					}
				});
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "post/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			insertType(){
				let url = "post/insert";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){						
						this.showData(1,this.pageInfo.pageSize,this.keyword);
						this.disableAddTypeDialog = false;
						
						this.type = {};
					}
				});
			},
			
			searchItem(){
				this.showItemData(1,5);
			},
			showItemData(pageNum,pageSize){
				let url = "post/getPaged";
				
				this.params = {...this.params,pageNum:pageNum,pageSize:pageSize};
				axios.post(url,this.params).then(resp=>{
					this.itemPageInfo = resp.data.data;
				});
			},
			handelItemCurrentChange(pageNum){
				this.showItemData(pageNum,this.itemPageInfo.pageSize);
			},
			handleItemSizeChange(pageSize){
				this.showItemData(1,pageSize);			
			},
			handleSelectionChange(item){
				this.ids = item.map(o=>o.id);
			},
			batchDelete(){
				this.$confirm("是否删除?","提示").then(()=>{
					let url = "constantItem/batchDelete";
					
					axios.post(url,this.ids).then(resp=>{
						if(resp.data.data > 0){
							this.$alert("删除成功！");
							this.showItemData(1,this.itemPageInfo.pageSize);
						}
					});
				}).catch(err=>{
					this.$alert(err);
				});
				
			}
			
		}
		
	}
</script>

<style>
</style>
